<template>
  <p style="text-align:center">南宁软件园中心 - 梁世燊 - JSDTN240308 - 白家煊</p>
  <div class="bjx-main" style="background-color: #f6f9fa">
    <!--轮播图-->
    <div class="bjx-carousel" style="position: relative">
      <el-carousel height="528px">
        <el-carousel-item><img src="https://carphoto.atzuche.com/pcweb/1694056364182.jpg" style="width: 100%;height: 100%"></el-carousel-item>
        <el-carousel-item><img src="https://carphoto.atzuche.com/pcweb/1694056373933.jpg" style="width:100%;height: 100%"></el-carousel-item>
        <span style="width: 432px;
              height: 143px;
              top: 50%;
              left: 50%;
              margin-top: -125px;
              margin-left: -197px;
              position: absolute;
                  "><img src="https://www.atzuche.com/static/media/slogan.5875ae96.png" style="width: 100%;height: 100%"></span>
      </el-carousel>
    </div>
    <!--图下小方块  -->
    <div class="bjx-banners"  style="z-index: 9;position: relative;width: 1024px;height: 96px;margin: 0 auto;margin-bottom: 64px">
      <div class="bjx-banners-1" style="display: flex;height: 96px;margin: -48px -8px 64px">
        <div class="scale"><a href="#" style="float: left;"><img src="https://cdn.atzuche.com/pc/subbanner/banner9.png" style="width: 244px;height: 96px;border-radius: 10px;margin:0 8px"></a></div>
        <div class="scale"><a href="#" style="float: left;"><img src="https://cdn.atzuche.com/pc/subbanner/banner2.jpg" style="width: 244px;height: 96px;border-radius: 10px;margin:0 8px"></a></div>
        <div class="scale"><a href="#" style="float: left;"><img src="https://cdn.atzuche.com/pc/subbanner/banner3.jpg" style="width: 244px;height: 96px;border-radius: 10px;margin:0 8px"></a></div>
        <div class="scale"><a href="#" style="float: left;"><img src="https://cdn.atzuche.com/pc/subbanner/banner10.png" style="width: 244px;height: 96px;border-radius: 10px;margin:0 8px"></a></div>
      </div>
    </div>
    <!-- 业务数据   -->
    <div class="bjx-basedata" style="height: 240px;text-align: center">
      <ul style="list-style: none;height: 240px;margin-left: -35px;display: flex;justify-content: center;overflow: hidden">
        <li style="box-sizing: border-box;;width: 244px;height: 240px;float: left;background-color: #fff;margin: 0 8px;padding: 24px;">
          <div style="text-align: justify;margin-top: -18px"><h3><span class="s_class">300</span></h3>
            <p style="font-size: 13px;color: #3c3c5a99;margin-top: -15px;">业务覆盖近<span style="color: #00cf97">300</span>个城市</p></div>
          <div style="margin-right: -74px;margin-top: 30px;"><img src="https://www.atzuche.com/static/media/bg-superiority-1.050cee88.png" style="width: 140px;height: 100px"></div>
          </li>
        <li style="box-sizing: border-box;;width: 244px;height: 240px;float: left;background-color: #fff;margin: 0 8px;padding: 24px;">
          <div style="text-align: justify;margin-top: -18px"><h3><span class="s_class">20,000,000+</span></h3>
            <p style="font-size: 13px;color: #3c3c5a99;margin-top: -15px;">注册用户突破<span style="color: #00cf97">2000</span>个城市</p></div>
          <div style="margin-right: -74px;margin-top: 30px;"><img src="https://www.atzuche.com/static/media/bg-superiority-2.56c87b81.png" style="width: 140px;height: 100px"></div>
        </li>
        <li style="box-sizing: border-box;;width: 244px;height: 240px;float: left;background-color: #fff;margin: 0 8px;padding: 24px;">
          <div style="text-align: justify;margin-top: -18px"><h3><span class="s_class">10,000+</span></h3>
            <p style="font-size: 13px;color: #3c3c5a99;margin-top: -15px;">超全车型逾<span style="color: #00cf97">10000</span>款</p></div>
          <div style="margin-right: -74px;margin-top: 30px;"><img src="https://www.atzuche.com/static/media/bg-superiority-3.8cabe447.png" style="width: 140px;height: 100px"></div>
        </li>
        <li style="box-sizing: border-box;;width: 244px;height: 240px;float: left;background-color: #fff;margin: 0 8px;padding: 24px;">
          <div style="text-align: justify;margin-top: -18px"><h3><span class="s_class">300,000+</span></h3>
            <p style="font-size: 13px;color: #3c3c5a99;margin-top: -15px;">注册车辆超过<span style="color: #00cf97">30</span>万辆</p></div>
          <div style="margin-right: -74px;margin-top: 30px;"><img src="https://www.atzuche.com/static/media/bg-superiority-4.d14c1741.png" style="width: 140px;height: 100px"></div>
        </li>
      </ul>
    </div>
    <!--  租车服务-->
    <div class="bjx-rent-car-service" style="width: 1024px;height: 850px;margin: 0 auto;">
    <div style="height: 48px "><h2 style="font-size: 32px;color: #3c3c5a">租车服务</h2></div>
    <div>
      <div style="display: flex;flex-align: center;align-items: center;margin: 20px 0 32px;flex-pack: center;justify-content: center;">
        <a href="#" style="text-decoration: none"><div class="zc-button active" style="margin: 0 8px">日租</div></a>
        <a href="#" style="text-decoration: none"><div class="zc-button" style="margin: 0 8px">月租租</div></a>
        <a href="#" style="text-decoration: none"><div class="zc-button" style="margin: 0 8px">企业租车</div></a>
      </div>
      <div>
        <div style="display: flex;flex-wrap: wrap;">
          <a href="/duanzu" class="zc-card" style="text-decoration: none; box-sizing: border-box;">
            <div style="display: flex;justify-content: space-between;">
              <div style="color: #3c3c5a;font-size: 16px;line-height: 28px;">经济型</div>
              <div style="display: flex" class="zc-price">
                60
                <span style="font-size: 10px;line-height: 12px;padding: 0 2px;">元天</span>
              </div>
            </div>
            <div class="zc-picture"><img class="scale" src="https://cdn.atzuche.com/pc/day/jjx.jpg" style="width: 100%"></div>
            <div >
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-left: 1px">推荐车型：大众宝来、丰田卡罗拉、别克英朗
                <br> GT、雪佛兰科沃兹、本田思域</p>
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-top: -10px">适用日常代步、短途出行、上下班等</p>
            </div>
          </a>
          <a href="/duanzu" class="zc-card" style="margin: 0 17px 16px 17px;text-decoration: none; box-sizing: border-box;">
            <div style="display: flex;justify-content: space-between;">
              <div style="color: #3c3c5a;font-size: 16px;line-height: 28px;">舒适型</div>
              <div style="display: flex" class="zc-price">
                119
                <span style="font-size: 10px;line-height: 12px;padding: 0 2px;">元天</span>
              </div>
            </div>
            <div class="zc-picture"><img class="scale" src="https://cdn.atzuche.com/pc/day/ssx.jpg" style="width: 100%"></div>
            <div >
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-left: 1px">推荐车型：丰田凯美瑞、别克君威、大众迈腾、
                <br>奥迪A3、日产天籁</p>
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-top: -10px">适用日常代步、旅行、约会、上下班等</p>
            </div>
          </a>
          <a href="/duanzu" class="zc-card" style="text-decoration: none; box-sizing: border-box;">
            <div style="display: flex;justify-content: space-between;">
              <div style="color: #3c3c5a;font-size: 16px;line-height: 28px;">豪华型</div>
              <div style="display: flex" class="zc-price">
                200
                <span style="font-size: 10px;line-height: 12px;padding: 0 2px;">元天</span>
              </div>
            </div>
            <div class="zc-picture"><img class="scale"  src="https://cdn.atzuche.com/pc/day/hhx.jpg" style="width: 100%"></div>
            <div >
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-left: 1px">推荐车型：奔驰C级、宝马3系、奥迪A4L、凯迪
                <br> 拉克CT5、特斯拉Model3</p>
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-top: -10px">适用豪车体验、商务接待、旅行等</p>
            </div>
          </a>
          <a href="/duanzu" class="zc-card" style="text-decoration: none; box-sizing: border-box;">
            <div style="display: flex;justify-content: space-between;">
              <div style="color: #3c3c5a;font-size: 16px;line-height: 28px;">SUV</div>
              <div style="display: flex" class="zc-price">
                68
                <span style="font-size: 10px;line-height: 12px;padding: 0 2px;">元天</span>
              </div>
            </div>
            <div class="zc-picture"><img class="scale"  src="https://cdn.atzuche.com/pc/day/suv.jpg" style="width: 100%"></div>
            <div >
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-left: 1px">推荐车型：Model Y、蔚来ES6、理想ONE、丰
                <br> 田汉兰达、大众途观</p>
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-top: -10px">适用日常出行、郊游、城市通勤等</p>
            </div>
          </a>
          <a href="/duanzu" class="zc-card" style="margin: 0 17px 16px 17px;text-decoration: none; box-sizing: border-box;">
            <div style="display: flex;justify-content: space-between;">
              <div style="color: #3c3c5a;font-size: 16px;line-height: 28px;">商务型</div>
              <div style="display: flex" class="zc-price">
                80
                <span style="font-size: 10px;line-height: 12px;padding: 0 2px;">元天</span>
              </div>
            </div>
            <div class="zc-picture"><img class="scale"  src="https://cdn.atzuche.com/pc/day/swx.jpg" style="width: 100%"></div>
            <div >
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-left: 1px">推荐车型：别克GL8、广汽传祺GM8、本田奥德
                <br> 赛、奔驰威霆、丰田埃尔法</p>
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-top: -10px">适用商务接待、全家出行、行政接待等</p>
            </div>
          </a>
          <a href="/duanzu" class="zc-card" style="text-decoration: none; box-sizing: border-box;">
            <div style="display: flex;justify-content: space-between;">
              <div style="color: #3c3c5a;font-size: 16px;line-height: 28px;">行政型</div>
              <div style="display: flex" class="zc-price">
                369
                <span style="font-size: 10px;line-height: 12px;padding: 0 2px;">元天</span>
              </div>
            </div>
            <div class="zc-picture"><img class="scale"  src="https://cdn.atzuche.com/pc/day/xzx.jpg" style="width: 100%"></div>
            <div >
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-left: 1px">推荐车型：保时捷Panamera、奔驰S级、奥迪
                <br>A8、玛莎拉蒂总裁、宾利飞驰</p>
              <p style="float: left;font-size: 13px;line-height: 20px;color: #3c3c5a;margin-top: -10px">适用商务接待、豪车体验、婚车等</p>
            </div>
          </a>

        </div>
      </div>
    </div>

  </div>
    <!--热租品牌-->
    <div class="bjx-rent-car-brand" style="width: 1024px;height: 418px;margin: 0 auto;">
    <div style="height: 48px "><h2 style="font-size: 32px;color: #3c3c5a">热租品牌</h2></div>
    <div style="margin: 24px -8px">
      <a href="/duanzu/_0_44" class="hot-row" >
      <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/bc.jpg" style="width: 157px;height: 157px">
      <h2 class="zt">奔驰</h2>
    </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/bm.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">宝马</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/ad.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">奥迪</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/bk.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">别克</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/dz.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">大众</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/bt.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">本田</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/rc.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">日产</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/ft.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">福特</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/tsl.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">特斯拉</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/kdlk.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">凯迪拉克</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/lkss.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">雷克萨斯</h2>
      </a>
      <a href="/duanzu/_0_44" class="hot-row" >
        <img class="scale" src="https://cdn.atzuche.com/pc/hotbrand/bsj.jpg" style="width: 157px;height: 157px">
        <h2 class="zt">保时捷</h2>
      </a>
    </div>

  </div>
    <!--  租车专题-->
    <div class="bjx-rent-subject" style="width: 1024px;height: 486px;margin: 0 auto;">
    <div style="height: 48px;"><h2 style="font-size: 32px;color: #3c3c5a">租车专题</h2></div>
    <div style="width: 1024px ;height: 414px;">
      <div style="display: flex;justify-content: space-between;">
        <a href="/subject/310100-17" style="background-color: #ffffff;display: block;width: 244px;height: 318px;text-decoration: none;border-radius: 10px;overflow: hidden">
          <img src="//carphoto.atzuche.com/pcWebService/imageFile/1695181075145.jpg" style="width: 244px;height: 160px">
          <div style="text-align: left;vertical-align: baseline;padding: 0 16px;font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">旅行租车</div>
          <div class="zc-zt" >租车去旅行，让我们帮您预定一辆车，带您去追寻未知的风景，让您的旅行之路更加精彩！在这个假期，让我们一起租车去旅行，享受路上的每一刻！</div>
        </a>
        <a href="/subject/310100-17" style="background-color: #ffffff;display: block;width: 244px;height: 318px;text-decoration: none;border-radius: 10px;overflow: hidden">
          <img src="//carphoto.atzuche.com/pcWebService/imageFile/1693366084331.jpg" style="width: 244px;height: 160px">
          <div style="text-align: left;vertical-align: baseline;padding: 0 16px;font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">国庆租车</div>
          <div class="zc-zt" >2024国庆租车专题，提供国庆租车价格，国庆租车攻略、国庆租车具体车型推荐等，更有超多国庆租车优惠；共享汽车模式，让你享受随时随地的共享租车体验！</div>
        </a>
        <a href="/subject/310100-17" style="background-color: #ffffff;display: block;width: 244px;height: 318px;text-decoration: none;border-radius: 10px;overflow: hidden">
          <img src="//carphoto.atzuche.com/pcWebService/imageFile/1682481422229.jpg" style="width: 244px;height: 160px">
          <div style="text-align: left;vertical-align: baseline;padding: 0 16px;font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">五一租车</div>
          <div class="zc-zt" >2024五一租车专题，提供五一租车价格，五一租车攻略、五一租车具体车型推荐等，更有超多五一租车优惠；共享汽车模式，让你享受随时随地的共享租车体验！</div>
        </a>
        <a href="/subject/310100-17" style="background-color: #ffffff;display: block;width: 244px;height: 318px;text-decoration: none;border-radius: 10px;overflow: hidden">
          <img src="//carphoto.atzuche.com/pcWebService/imageFile/1671526624000.jpg" style="width: 244px;height: 160px">
          <div style="text-align: left;vertical-align: baseline;padding: 0 16px;font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">春节租车</div>
          <div class="zc-zt" >凹凸租车-春节租车专题，为你提供春节租车价格明细表、精选春节租车攻略、春节租车具体车型推荐等，更有超多春节租车优惠；共享汽车模式，让你享受随时随地的共享租车体验！</div>
        </a>

      </div>
      <a href="http://localhost:8080/topic" class="zc-more">查看更多专题 ></a>
    </div>

  </div>
    <!--  凹凸资讯-->
    <div class="bjx-news" style="width: 1024px;height: 536px;margin: 0 auto;">
    <div><h2 style="color: #3c3c5a;font-size: 32px">凹凸资讯</h2></div>
    <div style="width: 1024px ;height: 384px;display: flex;flex-wrap: wrap;justify-content: space-between;">
      <a href="/news/310100-default-2863/" style="text-decoration: none"><div style="display: flex;border-radius: 10px;width: 504px;height: 112px;background-color: #ffffff">
        <div style="width: 340px;font-size: 12px;line-height: 17px;margin-left: 16px;margin-right: 20px;color: rgba(60, 60, 90, .6);text-align: left;">
          <h2 style="font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">租车需要注意的事项,怎么样租车不踩坑?</h2>
          <p style="margin-top: -1px">随着租车行业的快速发展，越来越多的企业开始投资这个朝阳行业，租车公司的数量迅速上升，这就会导致一个问题，那就是租车公司哪家好？这么多的租车公司，如何选择呢？</p>
        </div>
        <div style="width: 114px;height: 80px;overflow: hidden;margin-top: 12px;border-radius: 6px">
          <img src="https://cdn.atzuche.com/pc/news/news-1.jpg" style="width: 100%;">
        </div>
      </div></a>

      <a href="/news/310100-default-2863/" style="text-decoration: none"><div style="display: flex;border-radius: 10px;width: 504px;height: 112px;background-color: #ffffff">
        <div style="width: 340px;font-size: 12px;line-height: 17px;margin-left: 16px;margin-right: 20px;color: rgba(60, 60, 90, .6);text-align: left;">
          <h2 style="font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">商务车租赁公司哪家好？</h2>
          <p style="margin-top: -1px">租车是人们出行相对自由轻松的一种出行方式之一，尤其是疫情情况下，租车的私密安全性，是人们出远门或者周边游的首选方式；那么租车公司哪家好？哪家靠谱正规？</p>
        </div>
        <div style="width: 114px;height: 80px;overflow: hidden;margin-top: 12px;border-radius: 6px">
          <img src="https://cdn.atzuche.com/pc/news/news-2.jpg" style="width: 100%;">
        </div>
      </div></a>
      <a href="/news/310100-default-2863/" style="text-decoration: none"><div style="display: flex;border-radius: 10px;width: 504px;height: 112px;background-color: #ffffff">
        <div style="width: 340px;font-size: 12px;line-height: 17px;margin-left: 16px;margin-right: 20px;color: rgba(60, 60, 90, .6);text-align: left;">
          <h2 style="font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">租车公司报价表,租车一天的大概多少钱？</h2>
          <p style="margin-top: -1px">坐公交累、打车贵，遇到路线不熟时，找不准景点定位，经常会到站下车后，一家人一脸蒙圈，那该如何解决这个问题呢?然后就想到了租车出门，然后选择那个租车平台便宜靠谱呢？</p>
        </div>
        <div style="width: 114px;height: 80px;overflow: hidden;margin-top: 12px;border-radius: 6px">
          <img src="https://cdn.atzuche.com/pc/news/news-3.jpg" style="width: 100%;">
        </div>
      </div></a>
      <a href="/news/310100-default-2863/" style="text-decoration: none"><div style="display: flex;border-radius: 10px;width: 504px;height: 112px;background-color: #ffffff">
        <div style="width: 340px;font-size: 12px;line-height: 17px;margin-left: 16px;margin-right: 20px;color: rgba(60, 60, 90, .6);text-align: left;">
          <h2 style="font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">租车需要什么手续以及费用？新手租车指南</h2>
          <p style="margin-top: -1px">作为一个租车5年的老司机，国内各类租车APP都使用过；整理和分析了国内几个相对靠谱的租车平台的资料，从实力背景、流程便捷度、租车价格、保障及售后等多方面实测对比。</p>
        </div>
        <div style="width: 114px;height: 80px;overflow: hidden;margin-top: 12px;border-radius: 6px">
          <img src="https://cdn.atzuche.com/pc/news/news-4.jpg" style="width: 100%;">
        </div>
      </div></a>
      <a href="/news/310100-default-2863/" style="text-decoration: none"><div style="display: flex;border-radius: 10px;width: 504px;height: 112px;background-color: #ffffff">
        <div style="width: 340px;font-size: 12px;line-height: 17px;margin-left: 16px;margin-right: 20px;color: rgba(60, 60, 90, .6);text-align: left;">
          <h2 style="font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">新手租车攻略：第一次租车需要注意什么？</h2>
          <p style="margin-top: -1px">作为一个每个月要租车的人，租车平台哪个好？这个问题我来回答在合适不过。早年间还没有租车平台，租车都是街边小店或者百度上找。租10次起码5次不让你省心。</p>
        </div>
        <div style="width: 114px;height: 80px;overflow: hidden;margin-top: 12px;border-radius: 6px">
          <img src="https://cdn.atzuche.com/pc/news/news-5.jpg" style="width: 100%;">
        </div>
      </div></a>
      <a href="/news/310100-default-2863/" style="text-decoration: none"><div style="display: flex;border-radius: 10px;width: 504px;height: 112px;background-color: #ffffff">
        <div style="width: 340px;font-size: 12px;line-height: 17px;margin-left: 16px;margin-right: 20px;color: rgba(60, 60, 90, .6);text-align: left;">
          <h2 style="font-size: 16px;line-height: 22px;margin-bottom: 6px;color: #3c3c5a;">上海租车公司哪家好？便宜靠谱租车平台推荐</h2>
          <p style="margin-top: -1px">衣食住行一直是人们最基础需求保障，随着近几年疫情管控的常态化，更加快捷、安全的出行方式显得更加重要，租车以其便捷安全性的优点，成为越来越多人选择的一种出行方式。</p>
        </div>
        <div style="width: 114px;height: 80px;overflow: hidden;margin-top: 12px;border-radius: 6px">
          <img src="https://cdn.atzuche.com/pc/news/news-6.jpg" style="width: 100%;">
        </div>
      </div></a>
    </div>
    <a href="/news" class="zc-more" style="padding: 20px">查看更多专题 ></a>
  </div>
    <!-- 热门城市 -->
    <div class="bjx-hot-city" style="margin: 0 auto;width: 1024px;padding-bottom: 80px;" >
    <div style="height: 48px;"><h2 style="font-size: 32px;color: #3c3c5a">热门城市</h2></div>
    <div style="width: 1024px;height: 252px;">
      <div style="display: flex;justify-content: space-between;margin-top: 22px">
        <div style="width: 106px;height: 106px;">
          <a href="//shanghai.atzuche.com" style="display: inline-block">
          <img src="https://cdn.atzuche.com/pc/hotcity/sh.png " style="border-radius: 10px;width: 100%;">
        </a>
          <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px">上海租车</p>
        </div>
        <div style="width: 106px;height: 106px;">
          <a href="//shanghai.atzuche.com" style="display: inline-block">
            <img src="https://cdn.atzuche.com/pc/hotcity/nj.png" style="border-radius: 10px;width: 100%;">
          </a>
          <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px">南京租车</p>
        </div>
        <div style="width: 106px;height: 106px;">
          <a href="//shanghai.atzuche.com" style="display: inline-block">
            <img src="https://cdn.atzuche.com/pc/hotcity/hz.png " style="border-radius: 10px;width: 100%;">
          </a>
          <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px">杭州租车</p>
        </div>
        <div style="width: 106px;height: 106px;">
          <a href="//shanghai.atzuche.com" style="display: inline-block">
            <img src="https://cdn.atzuche.com/pc/hotcity/gz.png " style="border-radius: 10px;width: 100%;">
          </a>
          <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px">广州租车</p>
        </div>
        <div style="width: 106px;height: 106px;">
          <a href="//shanghai.atzuche.com" style="display: inline-block">
            <img src="https://cdn.atzuche.com/pc/hotcity/sz.png " style="border-radius: 10px;width: 100%;">
          </a>
          <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px">深圳租车</p>
        </div>
        <div style="width: 106px;height: 106px;">
          <a href="//shanghai.atzuche.com" style="display: inline-block">
            <img src="https://cdn.atzuche.com/pc/hotcity/bj.png " style="border-radius: 10px;width: 100%;">
          </a>
          <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px">北京租车</p>
        </div>
        <div style="width: 106px;height: 106px;">
          <a href="//shanghai.atzuche.com" style="display: inline-block">
            <img src="https://cdn.atzuche.com/pc/hotcity/sh.png " style="border-radius: 10px;width: 100%;">
          </a>
          <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px">上海租车</p>
        </div>
        <div style="width: 106px;height: 106px;">
          <a href="//shanghai.atzuche.com" style="display: inline-block">
            <img src="https://cdn.atzuche.com/pc/hotcity/wh.png " style="border-radius: 10px;width: 100%;">
          </a>
          <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px">武汉租车</p>
        </div>
        <div style="width: 106px;height: 106px;">
          <a href="//shanghai.atzuche.com" style="display: inline-block">
            <img src="https://cdn.atzuche.com/pc/hotcity/cd.png " style="border-radius: 10px;width: 100%;">
          </a>
          <p style="bottom: 14px;left: 16px;font-size: 14px;color: #fff;line-height: 22px;margin-top: -40px">成都租车</p>
        </div>
      </div>
      <!--  查询城市按钮    -->
      <div>
        <div style="display: flex;margin-top: 32px">
          <el-button type="success" class="button">B</el-button>
          <el-button class="button">C</el-button>
          <el-button class="button">D</el-button>
          <el-button class="button">E</el-button>
          <el-button class="button">F</el-button>
          <el-button class="button">G</el-button>
          <el-button class="button">H</el-button>
          <el-button class="button">J</el-button>
          <el-button class="button">K</el-button>
          <el-button class="button">L</el-button>
          <el-button class="button">N</el-button>
          <el-button class="button">P</el-button>
          <el-button class="button">Q</el-button>
          <el-button class="button">R</el-button>
          <el-button class="button">S</el-button>
          <el-button class="button">T</el-button>
          <el-button class="button">W</el-button>
          <el-button class="button">X</el-button>
          <el-button class="button">Y</el-button>
          <el-button class="button">Z</el-button>
        </div>
        <div style="display: flex;flex-wrap: wrap;margin-top: 18px">
          <a class="hot-city" href="https://beijing.atzuche.com">北京</a>
          <a class="hot-city" href="https://beijing.atzuche.com">滨州</a>
          <a class="hot-city" href="https://beijing.atzuche.com">包头</a>
          <a class="hot-city" href="https://beijing.atzuche.com">保定</a>
          <a class="hot-city" href="https://beijing.atzuche.com">毕节</a>
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<script setup>

</script>

<style scoped>
.bjx-main {
  min-width: 1024px;
}

.scale {
  transition: all 0.5s;
}

.scale:hover {
  transform: scale(1.05);
}

.s_class {
  font-size: 32px;
  color: #3c3c5a;

}

.zc-button {
  width: 120px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  border-radius: 24px;
  background: #fff;
  color: #3c3c5a;
}

.zc-button:hover {
  opacity: .75;
}

.zc-button.active {
  background-color: #00cf97;
  color: #fff;
}

.zc-card {
  position: relative;
  width: 330px;
  height: 328px;
  background-color: #fff;
  border-radius: 10px;
  padding: 24px;
  overflow: hidden;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  cursor: pointer;
}

.zc-price {
  font-size: 20px;
  line-height: 30px;
  color: #ff5c5c;
  font-weight: 700;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}

.zc-picture {
  width: 284px;
  height: 168px;
  position: relative;
  margin-bottom: 10px
}

.hot-row {
  width: 157px;
  height: 157px;
  margin: 0 8px 16px;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  position: relative;
  background-color: #f5f5f5;
}

.zt {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  position: absolute;
  bottom: 0;
  text-align: center;
  z-index: 9;
  left: 0;
  width: 100%;
}

.zc-zt {
  height: 100px;
  text-align: left;
  font-size: 12px;
  line-height: 17px;
  padding: 0 16px;
  color: rgba(60, 60, 90, .6);
  float: left;
}

.zc-more {
  font-size: 16px;
  line-height: 24px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 36px 0;
  color: #00cf97;
  font-weight: 700;
  text-decoration: none;
}

.button {
  width: 40px;
  height: 40px;
  margin-left: 10px;
}

.hot-city {
  text-decoration: none;
  display: block;
  background: #fff;
  border-radius: 24px;
  height: 48px;
  color: #3c3c5a;
  padding: 0 30px;
  line-height: 48px;
  font-size: 15px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.hot-city:hover {
  opacity: .75;
}

</style>
